<template>
  <div class="attr-container">
    <el-card>
      <Catergory :show="!showAddCategory" @getCategoryList="getCategoryListId" />
    </el-card>
    <el-card>
      <div v-show="showAddCategory">
        <!-- 按钮 -->
        <el-button
          type="primary"
          :disabled="!Catergory3Id"
          icon="el-icon-plus"
          style="margin: 10px 0"
          @click="addAttr"
        >添加属性</el-button>
        <!-- 表格 -->
        <el-table style="width: 100%" border :data="categoryList">
          <el-table-column prop="prop" label="序号" type="index" width="80" />
          <el-table-column prop="attrName" label="属性名称" width="150" />
          <el-table-column prop="prop" label="属性值列表" width="width">
            <template slot-scope="{ row }">
              <el-tag
                v-for="attr in row.attrValueList"
                :key="attr.id"
                style="margin: 5px 5px"
                type="success"
              >{{ attr.valueName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="{row}">
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="editAttr(row)" />
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delAttr(row)" />
            </template>

          </el-table-column>
        </el-table>
      </div>
      <div v-show="!showAddCategory">
        <!-- 表单 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="属性名">
            <el-input v-model="attrInfo.attrName" placeholder="请输入属性名" />
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <el-button type="primary" icon="el-icon-plus" :disabled="!attrInfo.attrName" @click="addAttrInfo">添加属性值</el-button>
        <el-button @click="showAddCategory = true">取消</el-button>
        <!-- 表格 -->
        <el-table style="width: 100%;margin:20px 0px" border :data="attrInfo.attrValueList">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="valueName" label="属性值名称" width="width">
            <template slot-scope="{row,$index}">
              <el-input v-if="row.flage" :ref="$index" v-model="row.valueName" placeholder="请输入属性值的名称" size="mini" @blur="showSpan(row)" />
              <span v-if="!row.flage" style="display:block" @click="showInput(row,$index)">{{ row.valueName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="width">
            <template slot-scope="{row}">
              <el-popconfirm
                :title="`确定删除${row.valueName}?`"
                @onConfirm="delteAttrValue(row)"
              >
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 按钮 -->
        <el-button type="primary" :disabled="attrInfo.attrValueList.length < 1" @click="saveAttrInfo">保存</el-button>
        <el-button @click="showAddCategory = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
  data() {
    return {
      attrInfo: {
        'attrName': '', // 属性名
        'attrValueList': [
          // 属性值
        ],
        'categoryId': 0, // id
        'categoryLevel': 3 // 几级分类
      },
      Catergory1Id: '',
      Catergory2Id: '',
      Catergory3Id: '',
      categoryList: [],
      showAddCategory: true
    }
  },
  methods: {
    // 保存attrinfo
    async saveAttrInfo() {
      const res = await this.$API.attr.saveAttrInfo(this.attrInfo)
      this.$message.success('添加成功')
      this.showAddCategory = true
      this.getCategoryList()
    },
    //  获取ID
    async getCategoryListId(data) {
      if (data.leave === 1) {
        this.Catergory1Id = data.Catergory1Id
        // 重置
        this.Catergory2Id = ''
        this.Catergory3Id = ''
      } else if (data.leave === 2) {
        this.Catergory2Id = data.Catergory2Id
        // 重置
        this.Catergory3Id = ''
      } else {
        this.Catergory3Id = data.Catergory3Id
        this.getCategoryList()
      }
      // this.AllCategoryId = {
      //   ...data
      // }
    },
    // 删除属性
    async  delAttr(row) {
      await this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await this.$API.attr.delAttr(row.id)
      this.$message.success('删除成功')
      this.getCategoryList()
    },
    // 删除属性值
    delteAttrValue(row) {
      console.log(row)
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item => {
        return item.id !== row.id
      })
    },
    // 获取数据
    async getCategoryList() {
      const { Catergory1Id, Catergory2Id, Catergory3Id } = this
      const res = await this.$API.attr.getCategoryList(
        Catergory1Id,
        Catergory2Id,
        Catergory3Id
      )
      // console.log(res)
      if (res.code === 200) {
        this.categoryList = res.data
      } else {
        this.$message.warning(res.message)
      }
    },
    // 添加属性值
    addAttrInfo() {
      this.attrInfo.attrValueList.push({
        'attrId': this.attrInfo.id,
        'valueName': '',
        flage: true
      })
      this.$nextTick(() => {
        this.$refs[this.attrInfo.attrValueList.length - 1].focus()
      })
    },
    // 编辑属性
    editAttr(row) {
      this.attrInfo = cloneDeep(row)
      this.attrInfo.attrValueList.forEach(item => {
        this.$set(item, 'flage', false)
      })
      this.showAddCategory = false
    },
    //  点击添加属性
    addAttr() {
      this.showAddCategory = false
      this.attrInfo = {
        'attrName': '', // 属性名
        'attrValueList': [
          // 属性值
        ],
        'categoryId': this.Catergory3Id, // id
        'categoryLevel': 3 // 几级分类
      }
    },
    // 显示span
    showSpan(row) {
      if (!row.valueName.trim()) {
        this.$message.warning('请输入属性值')
        return
      }
      const isValue = this.attrInfo.attrValueList.some(item => {
        if (item !== row) {
          return item.valueName === row.valueName
        }
      })
      if (isValue) {
        this.$message.warning('属性值重复')
        return
      }
      row.flage = false
    },
    // 显示input
    showInput(row, index) {
      row.flage = true
      this.$nextTick(() => {
        this.$refs[index].focus()
      })
    }
  }
}
</script>

<style>
</style>

